@use "sass:math";
$input-padding-top: 4px;
$input-padding-top-half: math.div($input-padding-top, 2);
$input-min-height: 32px;
.cascader-power-input-box {
	min-height: $input-min-height;
	height: auto;
	display: flex;
	align-items: center;
	position: relative;
	-webkit-appearance: none;
	background-color: #ffffff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #e0e1e2;
	box-sizing: border-box;
	color: #606266;
	font-size: inherit;
	outline: none;
	padding-top: 4px;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	width: 100%;
	cursor: pointer;
	&:hover {
		border-color: rgba($color-primary, $alpha: 0.5);
		.right-box {
			i {
				display: block;
			}
		}
	}
	&.is-focus {
		border-color: rgba($color-primary, $alpha: 0.5);
	}
	.placeholder-box {
		width: 100%;
		overflow: hidden;
		color: $text-color-placeholder;
		font-size: 12px;
		padding: 0 10px $input-padding-top 10px;
		height: $input-min-height - $input-padding-top - 2px;
		line-height: $input-min-height - $input-padding-top - $input-padding-top;
	}
	.content-box {
		flex: 1;
		.choose-box {
			display: flex;
			align-items: center;
			padding: 0 $input-padding-top;
			flex-wrap: wrap;

			.choose-item {
				margin-bottom: $input-padding-top;
				font-size: 12px;
				background-color: #f0f2f5;
				padding: 0 8px;
				display: flex;
				height: 20px;
				align-items: center;
				border-radius: 4px;
				max-width: 70%;
				.choose-item-content {
					flex: 1;
				}
				i {
					font-size: 12px;
					color: $text-color-secondary;
					margin-left: 4px;
					cursor: pointer;
					&:hover {
						color: $color-primary;
					}
				}
				&:not(:last-child) {
					margin-right: $input-padding-top;
				}
			}
		}
	}
	.right-box {
		height: $input-min-height - $input-padding-top - 2px;
		padding-right: 4px;
		width: 24px;
		display: flex;
		align-items: center;
		i {
			display: none;
			color: $text-color-secondary;
			&:hover {
				cursor: pointer;
				color: $color-primary;
			}
			padding-bottom: $input-padding-top;
		}
	}
}

// 兼容el-form 
.is-error {
	.cascader-power-input-box {
		border-color: $color-danger;
		&:hover {
			border-color: $color-danger;
		}
		&.is-focus {
			border-color: $color-danger;
		}
	}
}

// 兼容 form-item
.form-item.err :not(.is-success) {
	.cascader-power-input-box {
		border-color: $color-danger;
		&:hover {
			border-color: $color-danger;
		}
		&.is-focus {
			border-color: $color-danger;
		}
	}
}
